Skip to main content

18 前端基础和底层原理

关于前端需要重点学习的基础知识和基本原理：

  • JavaScript 核心原理：学好语言的特性，并且详细了解其中的各种坑。
  • 浏览器的工作原理：是前端程序员需要了解和明白的关键知识点。
  • 网络协议 HTTP：要着重了解，尤其是 HTTP/2，还有 HTTP 的几种请求方式：短连接、长连接、Stream 连接、WebSocket 连接。
  • 前端性能调优：上手各种性能调优技术。
  • 框架学习：React 和 Vue 两个框架，Virtual DOM 技术是其底层技术，组件化是其思想，管理组件的状态是其重点。对于 React 来说，函数式编程是其编程思想。
  • UI 设计：Google 的 Material UI，比较流行的 Atomic Design 等。

HTML 5​

HTML 5 学习推荐​

  • HTML 5 权威指南 ，本书面向初学者和中等水平 Web 开发人员，是牢固掌握 HTML 5、CSS 3 和 JavaScript 的必读之作
  • HTML 5 Canvas 核心技术 ，做 HTML 5 游戏

SVG、Canvas 和 WebGL​

  • SVG: Scalable Vector Graphics
  • Canvas API
  • The WebGL API: 2D and 3D graphics for the web

资源列表​

  • Awesome HTML5 ，GitHub 上的 Awesome HTML5，有大量的资源和技术文章
  • Awesome SVGAwesome Canvas
  • Awesome WebGL

CSS​

  • MDN Web Doc - CSS
  • LESS 和 SaSS， CSS 预处理工具，可以提高效率
  • Principles of writing consistent, idiomatic CSS
  • Opinionated CSS styleguide for scalable applications
  • Google HTML/CSS Style Guide

CSS Framework​

  • Bootstrap，不错的 UI 组件，页面布局方案，可以非常方便也非常快速地开发页面
  • Semantic UI，清新 UI
  • Foundation，主打响应式界面的
  • Flexbox 的 Bulma，基于flex
  • Normalize、MiniRest.css、sanitize.css 和 unstyle.css，把浏览器中的一些 HTML 标签给标准化掉
  • Awesome CSS Frameworks

CSS 相关实践​

CodePen’s CSS

Github 的 CSS

Medium’s CSS is actually pretty f***ing good

CSS at BBC Sport

Refining The Way We Structure Our CSS At Trello

A Scalable CSS Reading List，写出可扩展的 CSS

JavaScript​

  • JavaScript: The Good Parts ，介绍 JavaScript 语言本质的权威图书
  • Secrets of the JavaScript Ninja ，深入剖析 JavaScript 语言的书，适合具备一定 JavaScript 基础知识的读者阅读
  • Effective JavaScript ，深刻辨析 JavaScript 的内部运作机制、特性、陷阱和编程最佳实践，将它们高度浓缩为极具实践指导意义的 68 条精华建议

ES6 的学习​

  • ES6 in Depth，或者 A simple interactive ES6 Feature list ，或者 阮一峰翻译的 ES6 的教程
  • ECMAScript 6 Tools ，ES6 工具的列表，可以帮助提高开发效率
  • Modern JS Cheatsheet

You Don’t Know JS 系列​

  • You Don’t Know JS: “Up & Going”
  • You Don’t Know JS: “Scope & Closures”
  • You Don’t Know JS: “this & Object Prototypes”
  • You Don’t Know JS: “Types & Grammar”
  • You Don’t Know JS: “Async & Performance”
  • You Don’t Know JS: “ES6 & Beyond”

编程范式相关​

  • Glossary of Modern JavaScript Concepts: Part 1 ，编程范式方面的内容，比如纯函数、状态、可变性和不可变性、指令型语言和声明式语言、函数式编程、响应式编程、函数式响应编程
  • Glossary of Modern JavaScript Concepts: Part 2 ，作用域和闭包，数据流，变更检测，组件化

讲 JavaScript 内在的文章​

JavaScript. The Core: 2nd Edition

JavaScript. The Core (older ES3 version)

JS scope: static, dynamic, and runtime-augmented

How JavaScript Works​

  • An overview of the engine, the runtime, and the call stack
  • Inside the V8 engine + 5 tips on how to write optimized code ，了解 V8 引擎。同时推荐 Understanding V8’s Bytecode ，了解 V8 引擎的底层字节码
  • Memory management + how to handle 4 common memory leaks ，内存管理和 4 种常见的内存泄露问题
  • Event loop and the rise of Async programming + 5 ways to better coding with async/await ，Event Loop 和异步编程
  • Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path ，WebSocket 和 HTTP/2
  • A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript ，JavaScript 内在原理
  • The building blocks of Web Workers + 5 cases when you should use them ，Web Workers 技术
  • Service Workers, their lifecycle and use cases ，Service Worker 技术
  • The mechanics of Web Push Notifications ，Web 端 Push 通知技术
  • Tracking changes in the DOM using MutationObserver ，Mutation Observer 技术
  • The rendering engine and tips to optimize its performance ，渲染引擎和性能优化
  • Inside the Networking Layer + How to Optimize Its Performance and Security ，网络性能和安全相关
  • Under the hood of CSS and JS animations + how to optimize their performance ，CSS 和 JavaScript 动画性能优化

JavaScript 性能相关​

  • The Cost Of JavaScript
  • JavaScript Start-up Performance

相关资源​

  • JavScript has Unicode Problem ， JavaScript 处理 Unicode 的文章
  • JavaScript Algorithms ，用 JavaScript 实现的各种基础算法库
  • JavaScript 30 秒代码 ，一堆你可以在 30 秒内看懂各种有用的 JavaScript 的代码
  • What the f*ck JavaScript ，一堆 JavaScript 搞笑和比较 tricky 的样例
  • Airbnb JavaScript Style Guide ，Airbnb 的 JavaScript 的代码规范
  • JavaScript Patterns for 2017 ，YouTube 上的一个 JavaScript 模式分享

浏览器原理​

了解浏览器工作原理​

  • 《How browsers work》或者后来整理的 《How Browsers Work: Behind the scenes of modern web browsers》
  • 《浏览器的渲染原理简介》精简版本

Virtual DOM​

  • How to write your own Virtual DOM
  • Write your Virtual DOM 2: Props & Events
  • How Virtual-DOM and diffing works in React
  • The Inner Workings Of Virtual DOM
  • 深度剖析：如何实现一个 Virtual DOM 算法
  • Vitual-DOM 实现参考
    • Matt-Esch/Virtual-DOM
    • Maquette

网络协议​

  • High Performance Browser Networking ，涵盖 Web 开发者技术体系中应该掌握的所有网络及性能优化知识

HTTP/2​

  • Gitbook - HTTP/2 详解
  • http2 explained
  • HTTP/2 for a Faster Web
  • Nginx HTTP/2 白皮书
  • HTTP/2 的两个 RFC：
    • RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2) ，HTTP/2 的协议本身
    • RFC 7541 - HPACK: Header Compression for HTTP/2 ，HTTP/2 的压缩算法

WebSocket​

  • HTML5 WebSocket: A Quantum Leap in Scalability for the Web ，比较了 HTTP 的几种链接方式，Polling、Long Polling 和 Streaming，并引入了终级解决方案 WebSocket
  • StackOverflow: My Understanding of HTTP Polling, Long Polling, HTTP Streaming and WebSockets ，HTTP 各种链接方式的比较
  • An introduction to Websockets ，WebSocket 的简单教程
  • Awesome Websockets ，GitHub 的 Awesome 资源列表
  • 一些和 WebSocket 相关的想法
    • Introducing WebSockets: Bringing Sockets to the Web
    • Websockets 101
    • Real-Time Web by Paul Banks
    • Are WebSockets the future?